<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
        </head>
    <body>
        <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">

            <tr>
                <td height="600px" background="../img/regist_bg.jpg">
                    <!--嵌套一个十行二列的表格-->
                    <form action="#" method="get" name="regForm" onsubmit="return checkbox()"> <!-- 注意是onsubmit = return checkForm();-->
                        <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
                            <tr height="40px">
                                <td colspan="2">
                                    <font size="4">注册</font> &nbsp;&nbsp;&nbsp;USER REGISTER
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    用户名
                                </td>
                                <td>
                                    <input type="text" name="user" size="34px" id="user"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    密码
                                </td>
                                <td>
                                    <input type="password" name="password" size="34px" id="password"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    确认密码
                                </td>
                                <td>
                                    <input type="password" name="repassword" size="34px" id="repassword" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Emaile
                                </td>
                                <td>
                                    <input type="text" name="email" size="34px" id="eamil"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    手机号
                                </td>
                                <td>
                                    <input type="text" name="phone" id="phone" size="34px"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    性别
                                </td>
                                <td>
                                    <input type="radio" name="sex" value="男" id="sex"/>男
                                    <input type="radio" name="sex" value="女" id="sex"/>女
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    出生地
                                </td>
                                <td>
                                    <select id="selID" onchange="selcity()">  
                                        <option>--选择省市--</option>  
                                        <option>北京</option>  
                                        <option>山东</option>  
                                        <option>辽宁</option>  
                                        <option>广东</option>  
                                    </select>  
                                      
                                    <select id="subID">  
                                        <option>--选择城市--</option>  
                                    </select>  
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <input type="submit" value="注册" />
                                </td>
                            </tr>
                        </table>
                    </form>
                </td>
            </tr>

        </table>
    </body>
</html>
<script type="text/javascript">
    function checkbox(){
        //判断用户名输入框是否为空
        //1.获得用户名输入的信息 id="user"
        var Vuser = document.getElementById('user').value;
        //输入框为空时，提示信息
        if(Vuser==""){
            alert("用户名不能为空");
            return false;
        }
        //2.获得密码输入的信息
        var password = document.getElementById('password').value;
        //输入框为空时，提示信息
        if(password==""){
            alert("密码不能为空");
            return false;
        }
        //3.获得确认密码输入的信息 repassword
        var repassword = document.getElementById('repassword').value;
        //前后密码不一致，提示信息
        if(password!=repassword){
            alert("密码不一致");
            return false;
        }
        //4.获得eamil输入框的信息，
        var eamil = document.getElementById('eamil').value;
        //验证eamil是否合法，采用正则表达式eamil
        if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eamil)){
            alert("邮箱不正确");
            return false;
        }

    }
    function selcity(){  
        var arr = [["--选择城市--"],["海定区","东城区","西城区","朝阳区"],["济南","青岛","日照","威海"],  
                   ["营口","鞍山","沈阳","大连"],["广州","深圳","惠州","东莞"]];  
        var index = document.getElementById("selID").selectedIndex;  
        var subNode = document.getElementById("subID");  
        var citys = arr[index];        
          
        subNode.options.length = 0;   //清空之前选项  
        for(var x=0;x<citys.length;x++){  
            var optNode = document.createElement("option");  
            optNode.innerText = citys[x];  
            subNode.appendChild(optNode);  //选择添加到子选项中  
        }  
        function shouji() {
            var num = document.getElementById('phone').value;
            if(num.length!=11){
                alert("手机号必须11位")
            }
        }
    }  
</script>